<template>
    <div class="panel">
        <el-collapse v-model="collapseIndex" :accordion="false">
            <el-collapse-item title="基础设置" :name="1">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="元素ID">
                        <el-input size="mini" :value="element.uid" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="元素类型">
                        <el-input size="mini" :value="element.type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="入场延迟">
                        <el-input size="mini" type="number" v-model="element['data-delay']"></el-input>
                    </el-form-item>
                    <el-form-item label="强调延迟">
                        <el-input size="mini" type="number" v-model="element['data-emphasis-delay']" value="1000"></el-input>
                    </el-form-item>
                    <el-form-item label="退场延迟">
                        <el-input size="mini" type="number" v-model="element['data-out-delay']" value="29000"></el-input>
                    </el-form-item>
                    <el-form-item label="动画重复">
                        <el-radio-group v-model="element.styleObj.animationCount">
                            <el-radio label="1">单次</el-radio>
                            <el-radio label="infinite">无限循环</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="排版设置" :name="2">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="宽度">
                        <el-input size="mini" type="number" v-model="element.styleObj.width"></el-input>
                    </el-form-item>
                    <el-form-item label="高度">
                        <el-input size="mini" type="number" v-model="element.styleObj.height"></el-input>
                    </el-form-item>
                    <el-form-item label="上边距">
                        <el-input size="mini" type="number" v-model="element.styleObj.top"></el-input>
                    </el-form-item>
                    <el-form-item label="左边距">
                        <el-input size="mini" type="number" v-model="element.styleObj.left"></el-input>
                    </el-form-item>
                    <el-form-item label="旋转角度">
                        <el-slider :min="0" :max="360" v-model="element.styleObj.angel"></el-slider>
                        <el-input-number 
                            size="mini" 
                            v-model="element.styleObj.angel" 
                            :min="0" 
                            :max="360" 
                            :step="1"
                            controls-position="right"
                            style="width: 100%">
                        </el-input-number>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="属性设置" :name="3">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="字体">
                        <el-select v-model="element.styleObj.fontFamily" size="mini" placeholder="请选择字体">
                            <el-option label="Arial" value="Arial"></el-option>
                            <el-option label="微软雅黑" value="微软雅黑"></el-option>
                            <el-option label="宋体" value="宋体"></el-option>
                            <el-option label="黑体" value="黑体"></el-option>
                            <el-option label="楷体" value="楷体"></el-option>
                            <el-option label="阿里巴巴普惠体" value="Alibaba PuHuiTi"></el-option>
                            <!-- 恢复有CDN支持的部分站酷字体 -->
                            <el-option label="站酷快乐体" value="站酷快乐体"></el-option>
                            <el-option label="站酷文艺体" value="站酷文艺体"></el-option>
                            <el-option label="站酷酷黑体" value="站酷酷黑体"></el-option>
                            <!-- 注释掉没有字体文件支持的其他站酷字体 -->
                            <!--
                            <el-option label="站酷高端黑" value="站酷高端黑"></el-option>
                            <el-option label="站酷小薇LOGO体" value="站酷小薇LOGO体"></el-option>
                            <el-option label="站酷庆科黄油体" value="站酷庆科黄油体"></el-option>
                            <el-option label="站酷仓耳渔阳体" value="站酷仓耳渔阳体"></el-option>
                            -->
                            <!-- 恢复有CDN支持的思源字体 -->
                            <el-option label="思源黑体" value="思源黑体"></el-option>
                            <el-option label="思源宋体" value="思源宋体"></el-option>
                            <el-option label="Noto Sans CJK" value="Noto Sans CJK"></el-option>
                            <el-option label="Noto Serif CJK" value="Noto Serif CJK"></el-option>
                            
                            <!-- 新增字体 -->
                            <!--
                            <el-option label="DIN-Black" value="DIN-Black"></el-option>
                            <el-option label="DIN-Bold" value="DIN-Bold"></el-option>
                            <el-option label="DIN-Regular" value="DIN-Regular"></el-option>
                            <el-option label="Gray Design Bold" value="Gray Design Bold"></el-option>
                            <el-option label="Gray Design Regular" value="Gray Design Regular"></el-option>
                            <el-option label="Flama" value="Flama"></el-option>
                            -->
                            
                            <!-- 爱前端字体 -->
                            <!--
                            <el-option label="Cloudtype-YJyanhuangT" value="Cloudtype-YJyanhuangT"></el-option>
                            <el-option label="HBBaiYangDianRuanHeiTi" value="HBBaiYangDianRuanHeiTi"></el-option>
                            <el-option label="HuXiaoBo-NanShen" value="HuXiaoBo-NanShen"></el-option>
                            <el-option label="HuXiaoBo_KuHei" value="HuXiaoBo_KuHei"></el-option>
                            <el-option label="LiDeBiao-Xing3" value="LiDeBiao-Xing3"></el-option>
                            <el-option label="MF ShangYa (Noncommercial) Regular" value="MF ShangYa (Noncommercial) Regular"></el-option>
                            <el-option label="MF YueHei (Noncommercial) Regular" value="MF YueHei (Noncommercial) Regular"></el-option>
                            <el-option label="QXyingbikai" value="QXyingbikai"></el-option>
                            <el-option label="QXyingbixing" value="QXyingbixing"></el-option>
                            <el-option label="REEJI-Xiaodou-SugarGB" value="REEJI-Xiaodou-SugarGB"></el-option>
                            <el-option label="REEJI-ZhenyanGB2.0 Heavy" value="REEJI-ZhenyanGB2.0 Heavy"></el-option>
                            <el-option label="ShiShangZhongHeiJianTi" value="ShiShangZhongHeiJianTi"></el-option>
                            <el-option label="WuJiaRui" value="WuJiaRui"></el-option>
                            <el-option label="chenweixun-yingxing" value="chenweixun-yingxing"></el-option>
                            <el-option label="书体坊硬笔行书3500" value="书体坊硬笔行书3500"></el-option>
                            <el-option label="草檀斋毛泽东字体" value="草檀斋毛泽东字体"></el-option>
                            -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="文本颜色">
                        <el-color-picker v-model="element.styleObj.color" size="mini"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="背景颜色">
                        <el-color-picker v-model="element.styleObj.backgroundColor" size="mini"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="圆角">
                        <el-slider :min="0" :max="20" v-model="element.styleObj.radius"></el-slider>
                    </el-form-item>
                    <el-form-item label="文本内容">
                        <el-input size="mini" v-model="element.value" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文本大小">
                        <el-input size="mini" type="number" v-model="element.styleObj.fontSize"></el-input>
                    </el-form-item>
                    <el-form-item label="文本字重">
                        <el-radio-group v-model="element.styleObj.fontWeight">
                            <el-radio label="lighter">细体</el-radio>
                            <el-radio label="normal">默认</el-radio>
                            <el-radio label="bolder">粗体</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="文本对齐">
                        <div class="text-align-controls">
                            <el-button 
                                :type="element.styleObj.textAlign === 'left' && element.styleObj.verticalAlign === 'top' ? 'primary' : 'default'"
                                @click="setTextAlign('left', 'top')"
                                size="mini"
                                icon="el-icon-top-left"
                                title="顶部左对齐">
                            </el-button>
                            <el-button 
                                :type="element.styleObj.textAlign === 'left' && element.styleObj.verticalAlign === 'middle' ? 'primary' : 'default'"
                                @click="setTextAlign('left', 'middle')"
                                size="mini"
                                icon="el-icon-top"
                                title="中部左对齐">
                            </el-button>
                            <el-button 
                                :type="element.styleObj.textAlign === 'left' && element.styleObj.verticalAlign === 'bottom' ? 'primary' : 'default'"
                                @click="setTextAlign('left', 'bottom')"
                                size="mini"
                                icon="el-icon-top-right"
                                title="底部左对齐">
                            </el-button>
                        </div>
                        <div class="text-align-controls">
                            <el-button 
                                :type="element.styleObj.textAlign === 'center' && element.styleObj.verticalAlign === 'top' ? 'primary' : 'default'"
                                @click="setTextAlign('center', 'top')"
                                size="mini"
                                icon="el-icon-back"
                                title="顶部居中">
                            </el-button>
                            <el-button 
                                :type="element.styleObj.textAlign === 'center' && element.styleObj.verticalAlign === 'middle' ? 'primary' : 'default'"
                                @click="setTextAlign('center', 'middle')"
                                size="mini"
                                icon="el-icon-full-screen"
                                title="居中">
                            </el-button>
                            <el-button 
                                :type="element.styleObj.textAlign === 'center' && element.styleObj.verticalAlign === 'bottom' ? 'primary' : 'default'"
                                @click="setTextAlign('center', 'bottom')"
                                size="mini"
                                icon="el-icon-right"
                                title="底部居中">
                            </el-button>
                        </div>
                        <div class="text-align-controls">
                            <el-button 
                                :type="element.styleObj.textAlign === 'right' && element.styleObj.verticalAlign === 'top' ? 'primary' : 'default'"
                                @click="setTextAlign('right', 'top')"
                                size="mini"
                                icon="el-icon-bottom-left"
                                title="顶部右对齐">
                            </el-button>
                            <el-button 
                                :type="element.styleObj.textAlign === 'right' && element.styleObj.verticalAlign === 'middle' ? 'primary' : 'default'"
                                @click="setTextAlign('right', 'middle')"
                                size="mini"
                                icon="el-icon-bottom"
                                title="中部右对齐">
                            </el-button>
                            <el-button 
                                :type="element.styleObj.textAlign === 'right' && element.styleObj.verticalAlign === 'bottom' ? 'primary' : 'default'"
                                @click="setTextAlign('right', 'bottom')"
                                size="mini"
                                icon="el-icon-bottom-right"
                                title="底部右对齐">
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
export default {
    name: 'w-text-ctrl',
    props: {
        element: Object
    },
    data() {
        return {
            collapseIndex: 1
        }
    },
    methods: {
        setTextAlign(textAlign, verticalAlign) {
            // 初始化styleObj中的textAlign和verticalAlign属性
            if (!this.element.styleObj.textAlign) {
                this.$set(this.element.styleObj, 'textAlign', 'left');
            }
            if (!this.element.styleObj.verticalAlign) {
                this.$set(this.element.styleObj, 'verticalAlign', 'top');
            }
            
            // 设置对齐方式
            this.element.styleObj.textAlign = textAlign;
            this.element.styleObj.verticalAlign = verticalAlign;
        }
    },
    mounted() {
        // 初始化三阶段动画属性
        if (this.element && !this.element['data-emphasis-delay']) {
            this.$set(this.element, 'data-emphasis-delay', 1000);
        }
        if (this.element && !this.element['data-out-delay']) {
            this.$set(this.element, 'data-out-delay', 28000);
        }
        if (this.element && !this.element['data-emphasis-count']) {
            this.$set(this.element, 'data-emphasis-count', 'infinite');
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/variables";

.text-align-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    
    .el-button {
        flex: 1;
        margin: 0 2px;
        padding: 8px 5px;
    }
}
</style>